<template>
  <div class="login">
    <div class="container fix input-contain pb70">
      <img src="../assets/logonimg_03.jpg" alt="" class="flo-left left-img">
      <div class="flo-right bg-c-fff login-box">
        <h2>登录</h2>
        <form @submit.prevent='onLoginClick'>
          <ul class="input-box">
            <li><span>用户名</span>
              <input type="text" placeholder="请输入用户名/手机号" class="input-css input-w1" v-model='userName'>
            </li>
            <li><span>密码</span>
              <input type="password" placeholder="请输入密码" class="input-css input-w1" v-model='passWord'>
              <p>
                <input type="checkbox" id="RememberName" class="remember vm" v-model='checked'>
                <label for="RememberName">记住用户名</label>
              </p>
            </li>
            <li class="login-btn tc">
              <button type="submit" class="blue-button cup xxl-btn-css">登 录</button>
            </li>
          </ul>
        </form>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
export default {
  data() {
    return {
      userName: '',
      passWord: '',
      checked: false
    }
  },
  created() {
    if (localStorage.userName) {
      this.userName = localStorage.userName
      this.checked = true
    } else {
      this.checked = false
    }
  },
  methods: {
    onLoginClick() {
      if (!this.userName) {
        this.$toasted.show('用户名不能为空')
        return
      }
      if (!this.passWord) {
        this.$toasted.show('密码不能为空')
        return
      }
      if (this.checked) {
        localStorage.userName = this.userName
      } else {
        localStorage.userName = ''
      }
      this.$http.post('/sys/user/login', {
        account: this.userName,
        password: this.passWord
      }).then(data => {
        if (data.data.httpCode === 200) {
          this.getUserData()
        } else {
          console.log(data.data.msg)
          this.$toasted.show(data.data.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    getUserData() {
      this.$store.dispatch('getUserInfo').then(data => {
        if (data.data.httpCode === 200) {
          this.getUserMenus(data.data.data.userRole)
        } else {
          this.$toasted.show(data.data.msg)
        }
      }, err => {
        console.log(err)
      })
    },
    getUserMenus(roleId) {
      this.$store.dispatch('getUserMenus', roleId).then(data => {
        if (data.data.httpCode === 200) {
          this.$router.push('/index/welcome')
        } else {
          this.$toasted.show(data.data.msg)
        }
      }, err => {
        console.log(err)
      })
    }
  }
}

</script>
<style type="text/css" scoped>
.login .left-img {
  width: 554px;
  height: 440px;
}

h2 {
  font-size: 20px;
  color: #a5a5a5;
  padding-left: 20px;
  line-height: 45px;
  border-bottom: 1px solid #ddd;
}

.login {
  padding-bottom: 67px;
}

.login .input-box {
  padding: 20px 0 45px 0;
}

.login-box {
  width: 600px;
  height: 440px;
}

.login-box li:nth-of-type(1) {
  margin-top: 60px;
}

.login-box li:nth-of-type(2) {
  margin-top: 50px;
}

.login-box li:nth-of-type(3) {
  margin-top: 40px;
}

</style>
